#!/usr/bin/env node

/**
 * 设置页面布局测试脚本
 * 检查设置页面的布局修复是否正确
 */

const fs = require('fs');
const path = require('path');

console.log('🔧 检查设置页面布局修复...\n');

// 检查设置组件文件
const settingsFilePath = path.join(__dirname, '..', 'src/components/SettingsPanel.tsx');

if (!fs.existsSync(settingsFilePath)) {
  console.log('❌ SettingsPanel.tsx 文件不存在');
  process.exit(1);
}

const content = fs.readFileSync(settingsFilePath, 'utf8');

// 检查关键修复点
const checks = [
  {
    name: '响应式容器高度',
    pattern: /h-\[80vh\] sm:h-\[85vh\]/,
    description: '容器高度应该有响应式设计'
  },
  {
    name: '响应式最大宽度',
    pattern: /max-w-4xl sm:max-w-6xl/,
    description: '容器宽度应该有响应式设计'
  },
  {
    name: 'Flexbox层次结构',
    pattern: /flex flex-col overflow-hidden/,
    description: '应该使用正确的flexbox层次结构'
  },
  {
    name: '内容区域滚动',
    pattern: /overflow-y-auto min-h-0/,
    description: '内容区域应该可以滚动'
  },
  {
    name: '侧边栏响应式宽度',
    pattern: /w-40 sm:w-48/,
    description: '侧边栏宽度应该有响应式设计'
  },
  {
    name: '网格布局响应式',
    pattern: /grid-cols-1 sm:grid-cols-3/,
    description: '网格布局应该在小屏幕上变为单列'
  },
  {
    name: '响应式内边距',
    pattern: /p-4 sm:p-6/,
    description: '内边距应该有响应式设计'
  },
  {
    name: '底部按钮固定',
    pattern: /flex-shrink-0/,
    description: '底部按钮应该是固定位置'
  },
  {
    name: '侧边栏导航响应式文本',
    pattern: /hidden sm:inline/,
    description: '侧边栏文本应该在小屏幕上隐藏'
  }
];

let passedChecks = 0;
let totalChecks = checks.length;

console.log('📋 检查关键修复点:\n');

checks.forEach(check => {
  if (check.pattern.test(content)) {
    console.log(`✅ ${check.name}`);
    passedChecks++;
  } else {
    console.log(`❌ ${check.name}`);
    console.log(`   说明: ${check.description}`);
  }
});

// 检查文件大小（确保没有意外删除内容）
const stats = fs.statSync(settingsFilePath);
const fileSizeKB = Math.round(stats.size / 1024);

console.log(`\n📊 文件信息:`);
console.log(`   文件大小: ${fileSizeKB} KB`);
console.log(`   修复检查: ${passedChecks}/${totalChecks} 通过`);

// 额外检查：确保没有破坏原有的功能
const functionalityChecks = [
  {
    name: 'AI设置标签页',
    pattern: /activeTab === 'ai'/,
    description: 'AI设置功能应该保留'
  },
  {
    name: '编辑器设置标签页',
    pattern: /activeTab === 'editor'/,
    description: '编辑器设置功能应该保留'
  },
  {
    name: '主题设置标签页',
    pattern: /activeTab === 'theme'/,
    description: '主题设置功能应该保留'
  },
  {
    name: '快捷键设置标签页',
    pattern: /activeTab === 'shortcuts'/,
    description: '快捷键设置功能应该保留'
  },
  {
    name: '保存设置功能',
    pattern: /saveSettings/,
    description: '保存设置功能应该保留'
  },
  {
    name: '测试连接功能',
    pattern: /testAIConnection/,
    description: '测试连接功能应该保留'
  },
  {
    name: 'DeepSeek支持',
    pattern: /deepseek/,
    description: 'DeepSeek支持应该保留'
  }
];

console.log(`\n🔍 功能完整性检查:\n`);

let functionalityPassed = 0;
functionalityChecks.forEach(check => {
  if (check.pattern.test(content)) {
    console.log(`✅ ${check.name}`);
    functionalityPassed++;
  } else {
    console.log(`❌ ${check.name}`);
    console.log(`   说明: ${check.description}`);
  }
});

// 总结
console.log(`\n🎯 测试总结:`);
console.log(`   布局修复: ${passedChecks}/${totalChecks} 通过`);
console.log(`   功能完整性: ${functionalityPassed}/${functionalityChecks.length} 通过`);

const overallScore = Math.round(((passedChecks + functionalityPassed) / (totalChecks + functionalityChecks.length)) * 100);

console.log(`   总体评分: ${overallScore}%`);

if (overallScore >= 90) {
  console.log(`\n🎉 设置页面布局修复完成！`);
  console.log(`   ✅ 所有关键修复点都已实现`);
  console.log(`   ✅ 功能完整性保持良好`);
  console.log(`   ✅ 响应式设计已添加`);
} else if (overallScore >= 70) {
  console.log(`\n⚠️  设置页面布局基本完成`);
  console.log(`   ⚠️  部分功能需要进一步检查`);
  console.log(`   💡 建议运行应用程序进行实际测试`);
} else {
  console.log(`\n❌ 设置页面布局修复未完成`);
  console.log(`   ❌ 存在重要问题需要解决`);
  process.exit(1);
}

// 提供测试建议
console.log(`\n💡 测试建议:`);
console.log(`   1. 在不同屏幕尺寸下测试设置页面`);
console.log(`   2. 检查所有标签页是否可以正常切换`);
console.log(`   3. 验证内容区域是否可以正常滚动`);
console.log(`   4. 确认底部按钮始终可见`);
console.log(`   5. 测试所有输入框和开关的功能`);

console.log(`\n🚀 可以运行以下命令进行实际测试:`);
console.log(`   npm run dev`);
console.log(`   然后打开设置页面测试布局`);